<script setup lang="ts">
import { computed } from 'vue'
import { isCollapse } from '@/components/collapse'
import { useRoute, useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import type { IRouter } from '@/apis/types/user'

// defineOptions({ name: 'NewView' })
const userStore = useUserStore()
// const list = ref<IRouter[]>(userStore.menuList || [])
const list = computed(() => userStore.menuList || [])
const noChildren = computed(() => list.value.filter((item) => !item.children))
const hasChildren = computed(() => list.value.filter((item) => item.children))
const route = useRoute()
const router = useRouter()
const handleClick = (item: IRouter) => {
  router.push(item.path)
  userStore.selectMenu(item)
}
const activeMenu = computed(() => route.path)
</script>

<template>
  <el-aside class="aside">
    <el-menu
      class="menu"
      background-color="#545c64"
      text-color="#fff"
      :collapse="isCollapse"
      :collapse-transition="false"
      :default-active="activeMenu"
    >
      <div>
        <h3 class="title" v-show="!isCollapse">后台管理系统</h3>
        <h3 class="title" v-show="isCollapse"></h3>
      </div>
      <el-menu-item v-for="item in noChildren" :key="item.path" :index="item.path" @click="handleClick(item)">
        <component :is="item.icon" class="icon" />
        <span>{{ item.label }}</span>
      </el-menu-item>
      <el-sub-menu v-for="item in hasChildren" :key="item.path" :index="item.path">
        <template #title>
          <component :is="item.icon" class="icon" />
          <span>{{ item.label }}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item v-for="subitem in item.children" :key="subitem.path" :index="subitem.path" @click="handleClick(subitem)">
            <component :is="subitem.icon" class="icon" style="width: 18px; margin-right: 5px" />
            <span>{{ subitem.label }}</span>
          </el-menu-item>
        </el-menu-item-group>
      </el-sub-menu>
    </el-menu>
  </el-aside>
</template>

<style lang="scss" scoped>
.aside {
  width: v-bind("isCollapse ? '50px;' : '180px;'");
  height: 100vh;
  background-color: #545c64;

  .menu {
    border-right: none;

    .title {
      color: #fff;
      height: 64px;
      line-height: 64px;
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    }

    .icon {
      width: 18px;
      height: 18px;
      margin-right: 5px;
    }
  }
}
</style>
